﻿@page "/admin/tags"
@using Moonglade.Core.TagFeature
@inject IMediator Mediator
@{
    ViewBag.Title = "Tags";
    var tags = await Mediator.Send(new GetTagsQuery());
}

@Html.AntiForgeryToken()

@section scripts{
    <script src="~/js/app/dataexport.js"></script>
    <script>
        var editCanvas = new bootstrap.Offcanvas(document.getElementById('editTagCanvas'));

        function initCreateTag() {
            document.querySelector('#edit-form').reset();
            editCanvas.show();
        }

        document.querySelectorAll(".btn-delete").forEach(function(element) {
            element.addEventListener("click", function() {
                var tagid = this.getAttribute("data-tagid");
                var cfm = confirm(`Confirm to delete tag: ${this.textContent.trim()}`);
                if (cfm) {
                    callApi(`/api/tags/${tagid}`, 'DELETE', {}, function(resp) {
                        document.querySelector(`#li-tag-${tagid}`).style.display = 'none';
                        blogToast.success('Tag deleted');
                    });
                }
            });
        });

        document.querySelectorAll(".span-tagcontent-editable").forEach(function(element) {
            element.addEventListener("blur", function() {
                var tagId = this.getAttribute("data-tagid");
                var newTagName = this.textContent.trim();
        
                callApi(`/api/tags/${tagId}`, 'PUT', newTagName, function(resp) {
                    blogToast.success('Tag updated');
                });
            });
        });

        document.getElementById('tagFilter').addEventListener('keyup', function () {
            var value = this.value.toLowerCase();
            var items = document.querySelectorAll('.ul-tag-mgr li');

            items.forEach(function (item) {
                var show = item.textContent.toLowerCase().indexOf(value) > -1;
                item.style.display = show ? 'inline-block' : 'none';
            });
        });

        function handleSubmit(event) {
            event.preventDefault();

            const data = new FormData(event.target);
            const value = Object.fromEntries(data.entries());
        
            callApi(`/api/tags`, 'POST', value.tagName, function(resp) {
                document.querySelector('#edit-form').reset();
                window.location.reload();
            });
        }

        const form = document.querySelector('#edit-form');
        form.addEventListener('submit', handleSubmit);
    </script>
}

@section admintoolbar{
    <div class="admin-toolbar pb-2 border-bottom mb-3">
        <a class="btn btn-outline-accent" href="javascript:initCreateTag();">
            <i class="bi-plus-lg"></i>
            @SharedLocalizer["New"]
        </a>

        <a class="btn btn-outline-accent" href="javascript:exportCSV('/api/tags/list','moonglade-tags.csv');">
            <i class="bi-filetype-csv"></i>
            @SharedLocalizer["Export"]
        </a>
    </div>
}

<div>
    <input id="tagFilter" type="text" class="form-control mb-3" maxlength="32" placeholder="@SharedLocalizer["Filter"]">

    <ul class="list-unstyled ul-tag-mgr">
        @foreach (var tag in tags.OrderBy(model => model.DisplayName))
        {
            <li id="li-tag-@tag.Id" class="admin-tag-item border rounded shadow-sm">
                <span class="span-tagcontent-editable" contenteditable="true" spellcheck="false" data-tagid="@tag.Id">@tag.DisplayName</span>
                <a class="btn-delete" data-tagid="@tag.Id">
                    <i class="bi-trash"></i>
                    <span class="d-none">@tag.DisplayName</span>
                </a>
            </li>
        }
    </ul>
</div>

<div class="offcanvas offcanvas-end" tabindex="-1" id="editTagCanvas" aria-labelledby="editTagCanvasLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="editTagCanvasLabel">@SharedLocalizer["Create Tag"]</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <form id="edit-form" method="post">
            <div class="mb-2">
                <label class="form-label">@SharedLocalizer["Name"]</label>
                <input type="text" name="tagName" id="input-tag-name" class="form-control" required />
            </div>
            <div class="mt-3">
                <button type="submit" class="btn btn-outline-accent">@SharedLocalizer["Submit"]</button>
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="offcanvas">@SharedLocalizer["Cancel"]</button>
            </div>
        </form>
    </div>
</div>
